// ======================== 发ajax请求渲染广告列表 ========================
query = {
    advimgdesc: '',//广告图描述
    advimgpos: '',//广告图所在广告位id
    page: 1,//页码
    limit: 10,//每页数量
}
const layer = layui.layer
async function renderList() {
    const { data: { data } } = await axios.get('http://124.223.14.236:8060/admin/ydd_advimg/list', { params: query })
    document.querySelector('#list').innerHTML = data.data.map((item, index) => {
        const { advimgdesc, advimglink, advimgsrc, advposname, id } = item
        return ` <tr>
                 <td>${index + 1}</td>
                 <td>${advposname}</td>
                 <td>${advimgdesc}</td>
                 <td><img src="http://124.223.14.236:8060/${advimgsrc}" alt=""></td>
                 <td>${advimglink}</td>
                 <td>
                   <button type="button" class="layui-btn layui-btn-sm edit" data-id='${id}'>
                     <i class="layui-icon">&#xe642;</i>
                   </button>
                   <button type="button" class="layui-btn layui-btn-sm del" data-id='${id}'>
                     <i class="layui-icon">&#xe640;</i>
                   </button>
                 </td>
             </tr>`
    }).join('')
    // 通过函数调用将广告总数传递至分页函数部分
    renderPage(data.count)
}
renderList()
// ======================== 分页功能 ========================
let laypage = layui.laypage
function renderPage(count) {

    laypage.render({
        elem: 'page-box',
        count, //数据总数，从服务端得到
        limit: query.limit,//每页显示的条数
        curr: query.page,// 起始页
        limits: [2, 4, 6, 8, 10],//每页条数的选择项
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.page = obj.curr
            query.limit = obj.limit
            //首次不执行
            if (!first) {
                //do something
                renderList()//点击切换的时候执行，发请求
            }
        }
    })
}

// ======================== 添加功能 ========================
let addFormstr = `
    <form id="addForm" class="layui-form" lay-filter="editForm">
      <!-- 广告图所在广告位id -->
      <div class="layui-form-item">
         <label class="layui-form-label" style="font-size:14px;font-weight:700;vertical-align:auto;"><span style="color: red;">*</span>广告位</label>
         <div class="layui-input-block" style="width: 300px; margin-top: 10px">
           <select name="advimgpos" lay-filter="aihao" id='adv'>
            <option value="id">请选择广告位</option>
           </select>
         </div>
      </div>
      <!-- 请输入广告图描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="font-size:14px;font-weight:700;vertical-align:auto;"><span style="color: red;">*</span>描述</label>
        <div class="layui-input-block">
          <textarea name="advimgdesc" placeholder="请输入广告图描述" class="layui-textarea" style="width: 300px;"></textarea>                         
        </div>
      </div>
      <!-- 请输入链接地址描述 -->
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style="font-size:14px;font-weight:700;vertical-align:auto;"><span style="color: red;">*</span>链接</label>
        <div class="layui-input-block" style="width: 300px;">
          <input type="text" name="advimglink" placeholder="请输入广告图链接" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 广告图各种按钮 -->
      <div class="layui-form-item">
      <label class="layui-form-label" style="font-size:14px;font-weight:700;vertical-align:auto;"><span style="color: red;" id='change'>*</span>广告图
      </label>
      <button class="layui-btn upload" lay-submit lay-filter="formDemo" style="margin-top: 6px">点击上传</button>
         <div class="layui-input-block" style="margin-top: 10px;margin-left: 300px;">
           <button class="layui-btn" lay-submit lay-filter="formDemo">取消</button>
           <button class="layui-btn" lay-submit lay-filter="formDemo" id='confirm'>确认</button>
         </div>
      </div>
    </form>`
// 添加类别弹出层
let form = layui.form
let addFormindex
$('#increase').on('click', function () {
    // addFormindex是open弹层返回的一个当前层索引
    addFormindex = layer.open({
        content: addFormstr,//content可传入普通的html内容，还可以指定DOM
        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
        //若你采用 layer.open({ type: 1 })方式调用，则type为必填项（信息框除外）
        type: 1,
        area: ['500px', '300px'],//弹出层宽高
        title: '添加广告图'//标题
    })
    form.render()
    //发ajax请求将广告名放到弹出层下拉菜单
    axios.get('/ydd_advpos/all').then(({ data: { data } }) => {
        document.querySelector('#adv').innerHTML = `<option value="" >---请选择广告位---</option>${data.map(item => `<option value="${item.id}" style="font-size: 14px; color: #000;">${item.advposname}</option>`)}`
        form.render('select')
    })
    //模拟点击上传图片
    $('.upload').click(function (e) {
        e.preventDefault()
        $('#myFileInput').click()
    })
    $('#myFileInput').change(async function () {
        // 1.找到选择的图片（文件对象）
        let newSrc = this.files[0] //我们选择的图片的文件对象
        //判断用户是否选择了文件
        if (!newSrc) {
            return
        }
        renderSrc(newSrc)
        console.log(newSrc)
    })
})
let path
async function renderSrc(newSrc) {
    const fd = new FormData()
    fd.append('file', newSrc)
    const { data: { data: { savePath } } } = await axios.post('http://124.223.14.236:8060/admin/common/upload?type=images', fd, {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    })
    if (savePath) {
        document.querySelector('#change').style.color = 'green'
    }
    path = savePath
}
//收集添加广告表单数据
$('body').on('submit', '#addForm', async function (e) {
    e.preventDefault()
    const fd = new FormData(this)
    fd.append('advimgsrc', path)
    try {
        const res = await axios.post(`/ydd_advimg/add`, fd)
        layer.close(addFormindex)
        layer.msg('广告图添加成功')
        renderList()
    } catch (error) {
        layer.msg('广告图添加失败')
    }
})
// ======================== 将广告名称放到广告图下拉菜单 ========================
axios.get('/ydd_advpos/all').then(({ data: { data } }) => {
    document.querySelector('[name=cate_id]').innerHTML = `<option value="id" >---请选择广告位---</option>${data.map(item => `<option value="${item.id}" style="font-size: 14px; color: #000;">${item.advposname}</option>`)}`
})
// ======================== 删除功能 ========================
$('#list').on('click', '.del', function () {
    const id = $(this).attr('data-id')
    axios.get(`/ydd_advimg/del`, { params: { id } }).then(({ data: { errno, errmsg } }) => {
        console.log(errno, errmsg)
        if (errno === 1000) {
            return layer.msg(errmsg)
        }
        layer.msg('广告图删除成功')
        renderList()
    })
})
// ======================== 编辑功能 ========================
let editFormStr = `
     <form style="display: block;" id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 广告图id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">广告图id </label>
          <div class="layui-input-block">
            <input type="text" name="id" required lay-verify="required" placeholder="广告图id " autocomplete="off" class="layui-input" >
          </div>
        </div>
        <!-- 第一行 广告图所在广告位id -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位id</label>
          <div class="layui-input-block" style="width: 350px; margin-top: 10px">
            <select name="advimgpos" lay-filter="aihao" id='advimgpos'>
              <option value="id">请选择广告位</option>
            </select>
          </div>
        </div>
        <!-- 第二行 广告图描述  -->
        <div class="layui-form-item">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea name="advimgdesc" placeholder="请输入广告位描述" class="layui-textarea" style="width: 350px; height: 20px;"></textarea>
          </div>
        </div>
        <!-- 第三行 广告图链接  -->
        <div class="layui-form-item">
          <label class="layui-form-label">链接</label>
          <div class="layui-input-block">
            <input type="text" name="advimglink" required lay-verify="required" placeholder="广告图链接" autocomplete="off" class="layui-input" style="width: 350px;">
          </div>
        </div>
        <!-- 第四行 广告图地址  -->
        <div class="layui-form-item">
          <label class="layui-form-label">地址</label>
          <div class="layui-input-block">
            <input type="text" name="advimgsrc" required lay-verify="required" placeholder="广告图地址" autocomplete="off" class="layui-input" style="width: 350px;">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block" style=" margin-left:310px">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id='imgChange'>更换图片</button>
            <button class="layui-btn" lay-submit lay-filter="formDemo" id='editForm'>确认修改</button>
          </div>
        </div>
      </form>
`
// 编辑弹出层返回的索引
let editFormindex

// 显示编辑表单
$('#list').on('click', '.edit', function () {
    //发请求根据Id获取文章类别
    const id = $(this).attr('data-id')
    // console.log(id)
    axios.get('/ydd_advimg/rowInfo', { params: { id } }).then(({ data: { data } }) => {
        //将获取到的数据通过layui里面的方法赋值给表单
        form.val("editForm", data)//editForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    })
    //模拟点击上传图片
    $('.upload').click(function (e) {
        e.preventDefault()
        $('#myFileInput').click()
    })
    $('#myFileInput').change(async function () {
        // 1.找到选择的图片（文件对象）
        let newSrc = this.files[0] //我们选择的图片的文件对象
        //判断用户是否选择了文件
        if (!newSrc) {
            return
        }
        renderSrc(newSrc)
    })
    // 编辑弹出层
    editFormindex = layer.open({
        content: editFormStr,//content可传入普通的html内容，还可以指定DOM
        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
        //若你采用 layer.open({ type: 1 })方式调用，则type为必填项（信息框除外）
        type: 1,
        area: ['500px', '395px'],//弹出层宽高
        title: '修改广告图'//标题
    })
    //发ajax请求将广告名放到弹出层下拉菜单
    axios.get('/ydd_advpos/all').then(({ data: { data } }) => {
        document.querySelector('#advimgpos').innerHTML = `<option value="id" >${id}</option>${data.map(item => `<option value="${item.id}" style="font-size: 14px; color: #000;">${item.advposname}</option>`)}`
        form.render('select')
    })
    //修改图片
    $('#imgChange').click(function (e) {
        e.preventDefault()
        $('#myFileInput').click()
    })
    //编辑功能
    $('body').on('submit', '#editForm', function (e) {
        e.preventDefault()
        const fd = new FormData(this)
        axios.post(`/ydd_advimg/update`, fd).then((res) => {
            layer.close(editFormindex)
            // renderList()
            // console.log(res)
            layer.msg('修改成功')
            renderList()
        })
    })
})

// ======================== 重置功能 ========================
$('.reset').click(function (e) {
    e.preventDefault()
    // 将请求数据修改为默认值
    query.advimgdesc = ''
    query.advimgpos = ''
    query.page = 1
    query.limit = 10
    //重新渲染广告列表
    renderList()
})
// ======================== 查找、筛选功能 ========================
$('.search').click(function (e) {
    e.preventDefault()
    // 获取到输入框里面的值
    const content = $('.formVal').val()
    // 发ajax请求获取全部的列表内容
    query.advimgdesc = content
    const advImgid = $('#cateSelect').val()
    query.advimgpos = advImgid
    renderList()
})
// ======================== 导出功能 ========================
// const exportBtn = document.querySelector(".exportBtn")
// //当用户点击按钮时，执行导出操作
// exportBtn.onclick = function () {
//     // 创建一个文件内容字符串（这里使用了一个简单的示例字符串）
//     const content = "这是一个简单的文件内容示例"
//     // 创建一个 Blob 对象，并设置 MIME 类型为 plain/text
//     const blob = new Blob([content], { type: "plain/text" });
//     // 创建一个临时链接，并将该链接下载
//     const link = document.createElement("a")
//     link.href = URL.createObjectURL(blob)
//     link.download = "example.txt"
//     link.click()
//     // 释放 URL 对象
//     URL.revokeObjectURL(link.href)
// }

$('.exportBtn').click(function () {
  var table = document.getElementById("tabInfo")
  var data = []
  for (var i = 0, row; row = table.rows[i]; i++) {
    var rowData = []
    for (var j = 0, col; col = row.cells[j]; j++) {
      rowData.push(col.innerText)
    }
    data.push(rowData)
  }
  // 创建工作簿
  var workbook = XLSX.utils.book_new()

  // 创建工作表
  var worksheet = XLSX.utils.aoa_to_sheet(data)

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")

  // 导出工作簿为 Excel 文件
  XLSX.writeFile(workbook, "数据.xlsx")
})